<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.jOrgChart.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.jOrgChart.css" />
<!--<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/custom.css" />
<link type="text/css" rel="stylesheet" href="css/prettify.css" />-->

<style type="text/css">
div.jOrgChart  table {
    width:100%;
	margin: auto;
}
div.jOrgChart table {
	border-collapse: collapse;
}
.jOrgChart .node {
	/* box shadow */
	-moz-box-shadow: 0 0 1px #aaa;
	-webkit-box-shadow: 0 0 1px #aaa;
	box-shadow: 0 0 1px #aaa;
	/* general css rules */
	background: #FFF;
	border: 1px solid #666;
	border-radius: 5px;
	/* center the text vertically and horizontally */
	text-align: center;
	vertical-align: middle;
	/* fallback for non-Flexbox browsers */
	display: inline-block;
	/* Flexbox browsers */
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	display: inline-flex;
	/* vertical centering for legacy, horizontal centering for modern */
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	/* modern Flexbox only */
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	/* legacy Flexbox only */
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
}
.jOrgChart .line {
	width: 2px;
	border-color: #666;
}
.jOrgChart .top, .jOrgChart .right, .jOrgChart .left {
	border-width: 2px;
	border-color: #666;
}
.jOrgChart .down {
	background-color: #666
}
</style>
<title>jOrgChart Sample</title>
</head>

<body><form name="f" action="" method="get">
<ul id="org" style="display:none">
  <li> الإدارة العامة بالشركة المتحدة للطيران
    <ul>
      <li>dep1.1</li>
      <li>dep1.2
        <ul>
          <li>dep1.2.1</li>
          <li><a href="http://tquila.com" target="_blank">dep1.2.2</a>
            <ul>
              <li>dep1.2.2.1</li>
              <li>dep1.2.2.2</li>
              <li>dep1.2.2.3</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>dep1.3</li>
      <li>dep1.4
        <ul>
          <li>dep1.4.1</li>
          <li>dep1.4.2</li>
          <li>dep1.4.3</li>
        </ul>
      </li>
      <li>dep1.5</li>
    </ul>
  </li>
</ul>
<script type="text/javascript">
$(function() {
    $("#org").jOrgChart();
	//$("div.jOrgChart > table").attr('align','center');
	//var two = new Two({ type: Two.Types.canvas }).appendTo($("div.jOrgChart"));
    //var canvas = two.renderer.domElement;
    //var dataURL = canvas.toDataURL('img/png');
	//var canvas = $("div.jOrgChart");
    //var img    = canvas.toDataURL('image/jpeg');
	$('.jOrgChart .node').css({'width':'120px','height':'50px','background-color':'#fff','color':'#000'})
});

//var img=new Image; 
//img.src = $('#org').toDataURL(); 
//document.body.appendChild(img);
</script></form>
</body>
</html>
